<template>
  <div class="batch-workflow" ref="workflow"></div>
</template>
<script>
export default {
  name: "batchWorkflow",
  props:{
    endTime:{
      default:''
    },
    startTime:{
      default:''
    }
  },
  components: {},
  data() {
    return {
      myChart: null,
      workflowData:[]
    };
  },
  computed: {},
  methods: {
    drawLine() {
      this.myChart = this.$echarts.init(this.$refs.workflow);
      var option = {
        title: {
          text: "Workflow状态分布"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: "5%"
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: true,
              title: "下载"
            }
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            center: ["40%", "50%"],
            data: this.workflowData,

            label: {
              normal: {
                formatter: ({ percent, name }) => {
                  return name + "：" + percent + "%";
                }
              }
            }
          }
        ]
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    initData() {
      this.$http.batch
        .getWorkflowState({
          start_time: this.startTime,
          end_time: this.endTime,
          project_id:this.$route.query.project_id
        })
        .then((res) => {
          var list = [];
          for (var key in res) {
            list.push({ name: key, value: res[key] });
          }
          this.workflowData = list;
          this.drawLine();
        });
    }
  },
  mounted() {
    this.initData();
  }
};
</script>
<style lang="scss" scoped>
.batch-workflow {
  width: 100%;
  height: 100%;
}
</style>
